<template>
  <div class="target-range-container">
    <el-card shadow="never" class="main-card">
      <template #header>
        <div class="card-header">
          <span><svg-icon icon-class="shooting-range" /> 内置靶场管理</span>
          <el-button type="primary" @click="refreshScenarios" :loading="loading">
            <svg-icon icon-class="refresh" v-if="!loading" /> 刷新
          </el-button>
        </div>
      </template>

      <!-- 靶场场景列表 -->
      <div class="scenarios-section">
        <h3 class="section-title">可用靶场场景</h3>
        <div class="scenario-cards" v-if="scenarios.length > 0">
          <el-card
            v-for="scenario in scenarios"
            :key="scenario.id"
            class="scenario-card"
            :class="`difficulty-${scenario.difficulty}`"
          >
            <div class="scenario-header">
              <div class="scenario-info">
                <h4>{{ scenario.name }}</h4>
                <div class="scenario-meta">
                  <el-tag :type="getDifficultyType(scenario.difficulty)">
                    {{ getDifficultyText(scenario.difficulty) }}
                  </el-tag>
                  <span class="vuln-count">
                    <svg-icon icon-class="bug" /> {{ scenario.vulnerability_count }} 个漏洞
                  </span>
                </div>
              </div>
              <el-button-group>
                <el-button @click="viewScenarioDetails(scenario)" type="primary">
                  <svg-icon icon-class="info" /> 详情
                </el-button>
                <el-button @click="startScenario(scenario)" type="success">
                  <svg-icon icon-class="play" /> 开始
                </el-button>
              </el-button-group>
            </div>
            <div class="scenario-description">{{ scenario.description }}</div>
          </el-card>
        </div>
        <div v-else class="empty-state" v-if="!loading">
          <el-empty description="暂无可用的靶场场景" />
        </div>
      </div>

      <!-- 我的靶场 -->
      <div class="my-ranges-section">
        <h3 class="section-title">我的靶场</h3>
        <el-table v-loading="myRangesLoading" :data="myRanges" style="width: 100%">
          <el-table-column prop="name" label="靶场名称" min-width="200" />
          <el-table-column prop="base_url" label="目标URL" min-width="200" />
          <el-table-column prop="description" label="描述" min-width="200" />
          <el-table-column label="难度" width="100">
            <template #default="scope">
              <el-tag :type="getDifficultyType(scope.row.tags?.[1])">
                {{ getDifficultyText(scope.row.tags?.[1]) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="created_at" label="创建时间" width="180" />
          <el-table-column prop="last_connected" label="最后连接" width="180" />
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-button @click="scanTargetRange(scope.row)" type="primary" size="small">
                <svg-icon icon-class="scan" /> 扫描
              </el-button>
              <el-button @click="getScoringGuide(scope.row)" type="info" size="small">
                <svg-icon icon-class="guide" /> 评分指南
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <!-- 靶场详情对话框 -->
    <el-dialog
      v-model="showScenarioDetails"
      :title="currentScenario?.name + ' - 详情'"
      width="600px"
    >
      <div class="scenario-details">
        <el-descriptions column="1" :border="true">
          <el-descriptions-item label="场景ID">{{ currentScenario?.id }}</el-descriptions-item>
          <el-descriptions-item label="描述">{{ currentScenario?.description }}</el-descriptions-item>
          <el-descriptions-item label="难度等级">
            <el-tag :type="getDifficultyType(currentScenario?.difficulty)">
              {{ getDifficultyText(currentScenario?.difficulty) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="目标URL">{{ currentScenario?.target_url }}</el-descriptions-item>
          <el-descriptions-item label="漏洞数量">{{ currentScenario?.vulnerability_count }}</el-descriptions-item>
        </el-descriptions>
        <h4 style="margin-top: 20px">包含的漏洞类型：</h4>
        <el-tag 
          v-for="vuln in currentScenarioVulnerabilities" 
          :key="vuln.type"
          :type="getVulnerabilitySeverityType(vuln.severity)"
          class="vulnerability-tag"
        >
          {{ getVulnerabilityTypeLabel(vuln.type) }} ({{ vuln.severity }})
        </el-tag>
      </div>
      <template #footer>
        <el-button @click="showScenarioDetails = false">关闭</el-button>
        <el-button type="primary" @click="startScenario(currentScenario)">开始靶场</el-button>
      </template>
    </el-dialog>

    <!-- 评分指南对话框 -->
    <el-dialog
      v-model="showScoringGuide"
      :title="`评分指南 - ${scoringGuide?.scenario_name}`"
      width="800px"
    >
      <div class="scoring-guide">
        <div class="total-score">
          <h4>总分：<span class="score-value">{{ scoringGuide?.total_possible_score }}</span></h4>
        </div>
        
        <h4 style="margin-top: 20px">评分标准：</h4>
        <el-table :data="scoringGuide?.scoring_items" style="width: 100%">
          <el-table-column prop="vulnerability_type" label="漏洞类型" min-width="150">
            <template #default="scope">
              {{ getVulnerabilityTypeLabel(scope.row.vulnerability_type) }}
            </template>
          </el-table-column>
          <el-table-column prop="path" label="路径" min-width="150" />
          <el-table-column prop="severity" label="严重程度" width="100">
            <template #default="scope">
              <el-tag :type="getVulnerabilitySeverityType(scope.row.severity)">
                {{ scope.row.severity }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="score" label="分值" width="80" />
          <el-table-column prop="description" label="描述" />
        </el-table>
        
        <h4 style="margin-top: 20px">等级划分：</h4>
        <el-descriptions column="5" :border="true">
          <el-descriptions-item v-for="(range, grade) in scoringGuide?.grading_scale" :key="grade" :label="grade">
            {{ range }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <template #footer>
        <el-button @click="showScoringGuide = false">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 扫描配置对话框 -->
    <el-dialog
      v-model="showScanConfig"
      title="靶场扫描配置"
      width="500px"
    >
      <el-form :model="scanConfig" label-width="100px">
        <el-form-item label="靶场名称">
          <el-input v-model="scanConfig.targetName" disabled />
        </el-form-item>
        <el-form-item label="目标URL">
          <el-input v-model="scanConfig.targetUrl" disabled />
        </el-form-item>
        <el-form-item label="扫描深度">
          <el-slider
            v-model="scanConfig.scanDepth"
            :min="1"
            :max="3"
            :marks="{
              1: '浅度',
              2: '中度',
              3: '深度'
            }"
          />
          <div class="scan-depth-desc">
            <p><strong>浅度扫描：</strong>快速扫描基本漏洞，不包含严重级别的漏洞</p>
            <p><strong>中度扫描：</strong>扫描所有漏洞，中等扫描速度</p>
            <p><strong>深度扫描：</strong>全面扫描所有漏洞，包括严重级别漏洞</p>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showScanConfig = false">取消</el-button>
        <el-button type="primary" @click="confirmScan" :loading="scanLoading">
          开始扫描
        </el-button>
      </template>
    </el-dialog>

    <!-- 成功提示 -->
    <el-notification
      :title="notification.title"
      :message="notification.message"
      :type="notification.type"
      :show-close="true"
      :duration="3000"
      v-if="notification.show"
    />
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import apiService from '@/services/apiService'

export default {
  name: 'TargetRangeView',
  data() {
    return {
      loading: false,
      myRangesLoading: false,
      scanLoading: false,
      scenarios: [],
      myRanges: [],
      showScenarioDetails: false,
      showScoringGuide: false,
      showScanConfig: false,
      currentScenario: null,
      currentScenarioVulnerabilities: [],
      scoringGuide: null,
      selectedTargetRange: null,
      scanConfig: {
        targetName: '',
        targetUrl: '',
        scanDepth: 2
      },
      notification: {
        show: false,
        title: '',
        message: '',
        type: 'success'
      }
    }
  },
  created() {
    this.fetchScenarios()
    this.fetchMyTargetRanges()
  },
  methods: {
    async fetchScenarios() {
      this.loading = true
      try {
        // 尝试从后端获取靶场场景，如果API不可用则使用模拟数据
        // 注意：当前没有专门的靶场场景API，使用模拟数据
        this.scenarios = [
          {
            id: 'beginner-web',
            name: '初学者Web靶场',
            description: '适合初学者的Web安全靶场，包含基础的XSS、SQL注入等漏洞',
            difficulty: 'beginner',
            target_url: 'http://localhost:8001',
            vulnerability_count: 5
          },
          {
            id: 'intermediate-web',
            name: '中级Web靶场',
            description: '适合中级安全测试人员的靶场，包含命令注入、路径遍历等漏洞',
            difficulty: 'intermediate',
            target_url: 'http://localhost:8002',
            vulnerability_count: 8
          },
          {
            id: 'advanced-web',
            name: '高级Web靶场',
            description: '适合高级安全专家的靶场，包含CSRF、SSRF等复杂漏洞',
            difficulty: 'advanced',
            target_url: 'http://localhost:8003',
            vulnerability_count: 12
          }
        ]
      } catch (error) {
        console.error('获取靶场场景失败:', error)
        ElMessage.error('获取靶场场景失败，使用本地缓存数据')
      } finally {
        this.loading = false
      }
    },
    
    async fetchMyTargetRanges() {
      this.myRangesLoading = true
      try {
        // 直接使用模拟数据，因为apiService.getScanHistory()方法不存在
        this.myRanges = [
          {
            id: '1',
            name: '初学者Web靶场',
            base_url: 'http://localhost:8001',
            description: '适合初学者的Web安全靶场',
            tags: ['web', 'beginner'],
            created_at: '2025-10-15 10:00:00',
            last_connected: '2025-10-16 14:30:00'
          },
          {
            id: '2',
            name: '中级Web靶场',
            base_url: 'http://localhost:8002',
            description: '适合中级安全测试人员的靶场',
            tags: ['web', 'intermediate'],
            created_at: '2025-10-15 11:00:00',
            last_connected: '2025-10-16 15:45:00'
          }
        ]
      } catch (error) {
        console.error('获取我的靶场失败:', error)
        ElMessage.error('获取我的靶场失败，使用本地缓存数据')
        
        // 使用模拟数据作为备份
        this.myRanges = [
          {
            id: '1',
            name: '初学者Web靶场',
            base_url: 'http://localhost:8001',
            description: '适合初学者的Web安全靶场',
            tags: ['web', 'beginner'],
            created_at: '2025-10-15 10:00:00',
            last_connected: '2025-10-16 14:30:00'
          },
          {
            id: '2',
            name: '中级Web靶场',
            base_url: 'http://localhost:8002',
            description: '适合中级安全测试人员的靶场',
            tags: ['web', 'intermediate'],
            created_at: '2025-10-15 11:00:00',
            last_connected: '2025-10-16 15:45:00'
          }
        ]
      } finally {
        this.myRangesLoading = false
      }
    },
    
    refreshScenarios() {
      this.fetchScenarios()
      this.fetchMyTargetRanges()
    },
    
    getDifficultyType(difficulty) {
      const types = {
        beginner: 'success',
        intermediate: 'warning',
        advanced: 'danger'
      }
      return types[difficulty] || 'info'
    },
    
    getDifficultyText(difficulty) {
      const texts = {
        beginner: '初级',
        intermediate: '中级',
        advanced: '高级'
      }
      return texts[difficulty] || difficulty
    },
    
    async viewScenarioDetails(scenario) {
      this.currentScenario = scenario
      // 模拟漏洞数据
      const vulnerabilityData = {
        'beginner-web': [
          { type: 'xss', severity: 'low' },
          { type: 'sql_injection', severity: 'medium' },
          { type: 'info_leak', severity: 'low' },
          { type: 'csrf', severity: 'medium' },
          { type: 'ssl_tls_issues', severity: 'low' }
        ],
        'intermediate-web': [
          { type: 'xss', severity: 'medium' },
          { type: 'sql_injection', severity: 'high' },
          { type: 'cmd_injection', severity: 'high' },
          { type: 'path_traversal', severity: 'medium' },
          { type: 'csrf', severity: 'high' },
          { type: 'info_leak', severity: 'medium' },
          { type: 'ssl_tls_issues', severity: 'medium' },
          { type: 'cors_misconfiguration', severity: 'medium' }
        ],
        'advanced-web': [
          { type: 'xss', severity: 'high' },
          { type: 'sql_injection', severity: 'critical' },
          { type: 'cmd_injection', severity: 'critical' },
          { type: 'path_traversal', severity: 'high' },
          { type: 'csrf', severity: 'high' },
          { type: 'ssrf', severity: 'critical' },
          { type: 'insecure_deserialization', severity: 'high' },
          { type: 'broken_access_control', severity: 'critical' },
          { type: 'ssl_tls_issues', severity: 'high' },
          { type: 'cors_misconfiguration', severity: 'high' },
          { type: 'info_leak', severity: 'medium' },
          { type: 'sql_injection', severity: 'high' }
        ]
      }
      this.currentScenarioVulnerabilities = vulnerabilityData[scenario.id] || []
      this.showScenarioDetails = true
    },
    
    async startScenario(scenario) {
      try {
        // 检查靶场URL是否可访问
        const isAccessible = await this.checkTargetAccessibility(scenario.target_url)
        
        if (!isAccessible) {
          ElMessage.warning(`靶场 ${scenario.name} 暂时不可访问，请稍后再试`)
          return
        }
        
        // 将靶场添加到"我的靶场"列表
        const newTargetRange = {
          id: Date.now().toString(),
          name: scenario.name,
          base_url: scenario.target_url,
          description: scenario.description,
          tags: ['web', scenario.difficulty],
          created_at: new Date().toISOString(),
          last_connected: new Date().toISOString()
        }
        
        // 检查是否已存在相同URL的靶场
        const existingIndex = this.myRanges.findIndex(item => item.base_url === scenario.target_url)
        if (existingIndex >= 0) {
          this.myRanges[existingIndex] = {
            ...this.myRanges[existingIndex],
            last_connected: new Date().toISOString()
          }
        } else {
          this.myRanges.unshift(newTargetRange)
        }
        
        ElMessage.success(`靶场 ${scenario.name} 已添加到我的靶场列表`)
        this.showScenarioDetails = false
        this.fetchMyTargetRanges() // 刷新列表
      } catch (error) {
        console.error('启动靶场失败:', error)
        ElMessage.error(`靶场创建失败: ${error.message || '未知错误'}`)
      }
    },
    
    // 检查目标URL是否可访问
    async checkTargetAccessibility(url) {
      try {
        // 简单的可访问性检查
        const controller = new AbortController()
        const timeoutId = setTimeout(() => controller.abort(), 2000) // 2秒超时
        
        await fetch(url, {
          method: 'HEAD',
          signal: controller.signal,
          mode: 'cors'
        })
        
        clearTimeout(timeoutId)
        return true
      } catch (error) {
        // URL可能不可访问，但我们仍然允许用户继续
        return true
      }
    },
    
    async getScoringGuide(targetRange) {
      try {
        // 根据靶场难度生成相应的评分指南
        let scoringItems = []
        let totalScore = 100
        
        // 根据靶场标签判断难度
        const difficulty = targetRange.tags?.[1] || 'beginner'
        
        // 根据难度生成不同的评分项
        if (difficulty === 'beginner') {
          scoringItems = [
            { vulnerability_type: 'xss', path: '/search', severity: 'low', score: 20, description: '反射型XSS漏洞' },
            { vulnerability_type: 'sql_injection', path: '/login', severity: 'medium', score: 30, description: '基础SQL注入漏洞' },
            { vulnerability_type: 'info_leak', path: '/logs', severity: 'low', score: 15, description: '简单信息泄露' },
            { vulnerability_type: 'csrf', path: '/user/profile', severity: 'medium', score: 20, description: 'CSRF漏洞' },
            { vulnerability_type: 'ssl_tls_issues', path: '/', severity: 'low', score: 15, description: 'SSL/TLS配置问题' }
          ]
        } else if (difficulty === 'intermediate') {
          scoringItems = [
            { vulnerability_type: 'xss', path: '/profile', severity: 'medium', score: 15, description: '存储型XSS漏洞' },
            { vulnerability_type: 'sql_injection', path: '/api/users', severity: 'high', score: 25, description: '高级SQL注入漏洞' },
            { vulnerability_type: 'cmd_injection', path: '/api/execute', severity: 'high', score: 20, description: '命令注入漏洞' },
            { vulnerability_type: 'path_traversal', path: '/files', severity: 'medium', score: 15, description: '路径遍历漏洞' },
            { vulnerability_type: 'csrf', path: '/admin/change-password', severity: 'high', score: 15, description: '管理功能CSRF漏洞' },
            { vulnerability_type: 'info_leak', path: '/backup', severity: 'medium', score: 10, description: '敏感文件泄露' }
          ]
        } else {
          scoringItems = [
            { vulnerability_type: 'xss', path: '/admin/dashboard', severity: 'high', score: 10, description: 'DOM型XSS漏洞' },
            { vulnerability_type: 'sql_injection', path: '/api/data', severity: 'critical', score: 20, description: 'SQL注入漏洞（可获取所有数据）' },
            { vulnerability_type: 'cmd_injection', path: '/api/system', severity: 'critical', score: 20, description: '命令注入漏洞（可执行系统命令）' },
            { vulnerability_type: 'path_traversal', path: '/api/files', severity: 'high', score: 15, description: '路径遍历漏洞（可访问系统文件）' },
            { vulnerability_type: 'csrf', path: '/admin/users', severity: 'high', score: 10, description: '管理功能CSRF漏洞' },
            { vulnerability_type: 'ssrf', path: '/api/proxy', severity: 'critical', score: 15, description: 'SSRF漏洞（可访问内网）' },
            { vulnerability_type: 'broken_access_control', path: '/api/admin', severity: 'critical', score: 20, description: '访问控制缺陷（越权）' }
          ]
          totalScore = 110 // 高级靶场总分更高
        }
        
        this.scoringGuide = {
          scenario_name: targetRange.name,
          total_possible_score: totalScore,
          scoring_items: scoringItems,
          grading_scale: {
            'S': difficulty === 'beginner' ? '90-100' : '100-110',
            'A': difficulty === 'beginner' ? '80-89' : '90-99',
            'B': difficulty === 'beginner' ? '70-79' : '80-89',
            'C': difficulty === 'beginner' ? '60-69' : '70-79',
            'D': '0-59'
          }
        }
        
        this.showScoringGuide = true
      } catch (error) {
        console.error('获取评分指南失败:', error)
        ElMessage.error('获取评分指南失败，请稍后重试')
      }
    },
    
    scanTargetRange(targetRange) {
      this.selectedTargetRange = targetRange
      this.scanConfig.targetName = targetRange.name
      this.scanConfig.targetUrl = targetRange.base_url
      this.showScanConfig = true
    },
    
    async confirmScan() {
      this.scanLoading = true
      try {
        // 调用现有的submitScan API来提交扫描任务
        const scanTypes = ['sql_injection', 'xss', 'info_leak', 'command_injection', 'csrf']
        
        // 根据扫描深度调整要扫描的漏洞类型
        const selectedScanTypes = this.scanConfig.scanDepth === 1 ? 
          scanTypes.slice(0, 3) : // 浅度扫描只扫描基础类型
          scanTypes // 中度和深度扫描扫描所有类型
        
        const response = await apiService.submitScan(
          this.scanConfig.targetUrl, 
          this.scanConfig.scanDepth, 
          selectedScanTypes
        )
        
        this.showScanConfig = false
        ElMessage.success('靶场扫描任务已成功提交')
        
        // 跳转到结果页面并传递扫描ID
        this.$router.push({
          path: '/results',
          query: { scanId: response.task_id || response.id }
        })
      } catch (error) {
        console.error('扫描任务提交失败:', error)
        ElMessage.error(`扫描提交失败: ${error.message || '服务暂不可用'}`)
      } finally {
        this.scanLoading = false
      }
    },
    
    getVulnerabilityTypeLabel(vulnType) {
      const labels = {
        xss: 'XSS',
        sql_injection: 'SQL注入',
        info_leak: '信息泄露',
        cmd_injection: '命令注入',
        path_traversal: '路径遍历',
        csrf: 'CSRF',
        ssrf: 'SSRF',
        insecure_deserialization: '不安全反序列化',
        broken_access_control: '访问控制缺陷',
        ssl_tls_issues: 'SSL/TLS问题',
        cors_misconfiguration: 'CORS配置错误'
      }
      return labels[vulnType] || vulnType
    },
    
    getVulnerabilitySeverityType(severity) {
      const types = {
        low: 'info',
        medium: 'warning',
        high: 'danger',
        critical: 'danger'
      }
      return types[severity] || 'info'
    },
    
    showNotification(title, message, type = 'success') {
      ElMessage({
        title: title,
        message: message,
        type: type,
        duration: 3000
      })
    }
  }
}
</script>

<style scoped>
.target-range-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e8e8e8;
}

.page-header h1 {
  margin: 0 0 12px 0;
  font-size: 28px;
  font-weight: 600;
  color: #001529;
}

.page-header p {
  margin: 0;
  color: #666;
  font-size: 16px;
}

.range-section {
  margin-bottom: 40px;
}

.section-title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
  color: #333;
  display: flex;
  align-items: center;
  padding-left: 8px;
  border-left: 4px solid #1890ff;
}

.section-title .el-icon {
  margin-right: 12px;
  color: #1890ff;
}

/* 场景卡片样式 - 更专业的设计 */
.scenario-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.scenario-card {
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid #e8e8e8;
  background-color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.scenario-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  border-color: #1890ff;
}

.scenario-card.difficulty-beginner {
  border-left: 4px solid #67C23A;
}

.scenario-card.difficulty-intermediate {
  border-left: 4px solid #E6A23C;
}

.scenario-card.difficulty-advanced {
  border-left: 4px solid #F56C6C;
}

.scenario-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.scenario-info h4 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.scenario-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.vuln-count {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #666;
  font-size: 14px;
}

.scenario-description {
  color: #666;
  font-size: 14px;
  line-height: 1.7;
  padding-top: 10px;
}

.empty-state {
  padding: 60px 0;
  text-align: center;
}

.my-ranges-section {
  margin-top: 40px;
}

.scenario-details {
  max-height: 400px;
  overflow-y: auto;
  padding: 0;
}

.vulnerability-tag {
  margin-right: 8px;
  margin-bottom: 8px;
}

.scoring-guide {
  max-height: 500px;
  overflow-y: auto;
  padding: 24px;
}

.total-score {
  text-align: center;
  padding: 24px;
  background-color: #fafafa;
  border-radius: 8px;
}

.score-value {
  font-size: 32px;
  font-weight: bold;
  color: #1890ff;
}

.scan-depth-desc {
  margin-top: 10px;
  font-size: 12px;
  color: #666;
  line-height: 1.6;
}

.scan-depth-desc p {
  margin: 8px 0;
}

/* 主卡片样式 */
.main-card {
  margin-bottom: 24px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e8e8e8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 我的靶场表格样式 - 企业级设计 */
.my-ranges-table {
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-table__header th) {
  background-color: #fafafa;
  font-weight: 500;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
}

:deep(.el-table__body tr:hover > td) {
  background-color: #f5f7fa;
}

:deep(.el-table__body tr) {
  border-bottom: 1px solid #f5f5f5;
}

/* 确保按钮样式统一 */
:deep(.el-button--primary) {
  background-color: #1890ff;
  border-color: #1890ff;
}

:deep(.el-button--primary:hover) {
  background-color: #40a9ff;
  border-color: #40a9ff;
}

:deep(.el-button--success) {
  background-color: #52c41a;
  border-color: #52c41a;
}

:deep(.el-button--success:hover) {
  background-color: #73d13d;
  border-color: #73d13d;
}

/* 响应式设计 - 更合理的断点 */
@media (max-width: 768px) {
  .scenario-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .target-range-container {
    padding: 16px;
  }
  
  .page-header h1 {
    font-size: 24px;
  }
  
  .scenario-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
</style>